<template>
	<view class="mine">
		<view class="header">
			<view class="user f ai-c">
				<image src="../../static/logo.jpg"></image>
				<view v-if="userInfo.phone">{{userInfo.nickname}}</view>
				<view v-else @click="handleLogin">登录</view>
			</view>
		</view>

		<view class="content">
			<!-- 我的资料包 -->
			<view class="info-box">
				<view class="f jc-s-b" style="margin-bottom: 20rpx;">
					<view class="info-title f ai-c">
						<image src="../../static/info.png"></image>
						我的资料包
					</view>
					<view class="favorites f ai-c" @click="handleCreate">
						<image src="../../static/favorites.png"></image>
						新建收藏夹
					</view>
				</view>
				<view class="favorites-list f ai-c jc-s-b" @click="handleCollection(item)"
					v-for="(item,index) in favoritesList" :key="index">
					<view class="f ai-c">
						<image src="../../static/list-favorites.png"></image>
						<view class="fl-title">{{item.title}}</view>
						<view class="fl-num">{{item.num||0}}篇</view>
					</view>
					<view class="favorites-operate" v-show="item.type==3">
						<image src="../../static/edit.png" @click.stop="favoritesEdit(item)"></image>
						<image src="../../static/del.png" @click.stop="favoritesDel(item)"></image>
					</view>
				</view>
				<!-- <view class="favorites-list f ai-c" @click="handleCollectionFavorites">
					<image src="../../static/list-favorites.png"></image>
					<view class="fl-title">合集收藏夹</view>
					<view class="fl-num">1篇</view>
				</view>
				<view class="favorites-list f ai-c" @click="handleCollection">
					<image src="../../static/list-favorites.png"></image>
					<view class="fl-title">这是名字</view>
					<view class="fl-num">1篇</view>
				</view> -->
			</view>

			<!-- 其他 -->
			<view class="other">
				<view class="f ai-c jc-s-b other-line" @click="handleToolKit">
					<view class="other-title f ai-c">
						<image src="../../static/gjb.png"></image>特检学习工具包
					</view>
					<u-icon name="arrow-right" color="#bfc6d2" size="14"></u-icon>
				</view>
				<view class="f ai-c jc-s-b other-line" @click="handleActivationCode" v-if="userInfo.is_customer_service==1">
					<view class="other-title f ai-c">
						<image src="../../static/jhm.png"></image>激活码发放
					</view>
					<u-icon name="arrow-right" color="#bfc6d2" size="14"></u-icon>
				</view>
			</view>
			<!-- <view class="other">
					<view class="f ai-c jc-s-b other-line" >
						退出登录
					</view>
				</view> -->
		</view>
		<!-- 新增/编辑收藏夹 -->
		<CreateFavorites ref="createFavorites" @changeCreateFavorites="getFavorites" />
	</view>
</template>

<script>
	import {
		favorites,
		deleteFavorites
	} from '@/api/mine.js'
	import CreateFavorites from '@/components/CreateFavorites/index.vue'
	export default {
		components: {
			CreateFavorites
		},
		data() {
			return {
				favoritesList: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},

		},
		onShow() {
			this.$store.dispatch('getUserInfo')
			this.getFavorites()
		},
		methods: {
			//激活码
			handleActivationCode(){
				uni.navigateTo({
					url:'/pages/activationCode/activationCode'
				})
			},
			//激活码
			handleToolKit(){
				uni.navigateTo({
					url:'/pages/toolKit/toolKit'
				})
			},
			handleLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			//编辑收藏夹
			favoritesEdit(data) {
				this.$refs.createFavorites.setPopup('edit', data);
			},
			//删除收藏夹
			favoritesDel(data) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定删除 ${data.title} 收藏夹？`,
					success: async function(res) {
						if (res.confirm) {
							await deleteFavorites({
								favorites_id: data.id
							})
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							that.getFavorites()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//获取收藏夹
			async getFavorites() {
				const {
					data
				} = await favorites({})
				this.favoritesList = data
			},
			//订单列表
			handleOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			//新建收藏夹
			handleCreate() {
				this.$refs.createFavorites.setPopup('add');
			},
			//收藏夹
			handleCollection(data) {
				if (data.type == 2) { //合集收藏夹
					uni.navigateTo({
						url: `/pages/mine/collectionFavoritesList?id=${data.id}`
					})
				} else { //收藏夹
					uni.navigateTo({
						url: `/pages/mine/favoritesList?id=${data.id}`
					})
				}

			},
			//合集收藏夹
			handleCollectionFavorites() {
				uni.navigateTo({
					url: '/pages/mine/collectionFavoritesList'
				})
			},
			handleAddress() {
				uni.chooseAddress({
					success: (res) => {

					},
					fail: (err) => {
						console.log(err);
					}
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.mine {
		min-height: 100vh;
		background: #f7f8fc;

		.content {
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: -120rpx;

			.other {
				background: #fff;
				border-radius: 24rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				margin-top: 24rpx;

				.other-title {
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 16rpx;
					}
				}

				.other-line {
					border-bottom: 1px solid #f2f2f2;
					font-size: 28rpx;
					padding: 24rpx 0;
					box-sizing: border-box;
					text-align: center;
				}

				.other-line:last-child {
					border-bottom: none;
				}
			}

			.order-box {
				background: #fff;
				border-radius: 24rpx;
				padding: 32rpx;
				box-sizing: border-box;
				margin-top: 24rpx;

				.order-list {
					color: #666666;
					font-size: 28rpx;
					margin-top: 32rpx;
					padding: 0 48rpx;
					box-sizing: border-box;

					image {
						width: 45rpx;
						height: 45rpx;
						margin-bottom: 10rpx;
					}
				}

				.order-title {
					font-size: 28rpx;
					color: #000;

					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 8rpx;
					}
				}
			}

			.info-box {
				background: #fff;
				border-radius: 24rpx;
				padding: 32rpx;
				box-sizing: border-box;

				.favorites-list {
					padding: 24rpx 0;
					box-sizing: border-box;

					image {
						width: 35rpx;
						height: 35rpx;
					}

					.fl-title {
						font-size: 30rpx;
						font-weight: 800;
						margin-left: 16rpx;
					}

					.fl-num {
						font-size: 24rpx;
						margin-left: 16rpx;
						color: #9ba3ad;
					}
				}

				.favorites-operate {
					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: 24rpx;
					}
				}

				.favorites {
					color: #7b828a;
					font-size: 26rpx;

					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 8rpx;
					}
				}

				.info-title {
					font-size: 28rpx;
					color: #000;

					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		.header {
			background: linear-gradient(to bottom, #4281f5, #f7f8fc);
			height: 250rpx;
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;

			.user {
				font-size: 28rpx;
				font-weight: 800;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
			}
		}
	}

@media only screen and (min-width: 750px) {
	.mine {
		min-height: 100vh;
		background: #f7f8fc;
	
		.content {
			padding: 32px;
			box-sizing: border-box;
			position: relative;
			margin-top: -120px;
	
			.other {
				background: #fff;
				border-radius: 24px;
				padding: 0 32rpx;
				box-sizing: border-box;
				margin-top: 24px;
	
				.other-title {
					image {
						width: 15px;
						height: 15px;
						margin-right: 16px;
					}
				}
	
				.other-line {
					border-bottom: 1px solid #f2f2f2;
					font-size: 14px;
					padding: 12px 0;
					box-sizing: border-box;
					text-align: center;
				}
	
				.other-line:last-child {
					border-bottom: none;
				}
			}
	
			.order-box {
				background: #fff;
				border-radius: 12px;
				padding: 16px;
				box-sizing: border-box;
				margin-top: 12px;
	
				.order-list {
					color: #666666;
					font-size: 14px;
					margin-top: 16px;
					padding: 0 24px;
					box-sizing: border-box;
	
					image {
						width: 22px;
						height: 22px;
						margin-bottom: 10px;
					}
				}
	
				.order-title {
					font-size: 14px;
					color: #000;
	
					image {
						width: 17px;
						height: 17px;
						margin-right: 8px;
					}
				}
			}
	
			.info-box {
				background: #fff;
				border-radius: 12px;
				padding: 16px;
				box-sizing: border-box;
				width: 375px;
				margin: 50px auto 0 auto;
	
				.favorites-list {
					padding: 12px 0;
					box-sizing: border-box;
	
					image {
						width: 17px;
						height: 17px;
					}
	
					.fl-title {
						font-size: 15px;
						font-weight: 800;
						margin-left: 8px;
					}
	
					.fl-num {
						font-size: 12px;
						margin-left: 8px;
						color: #9ba3ad;
					}
				}
	
				.favorites-operate {
					image {
						width: 15px;
						height: 15px;
						margin-left: 12px;
					}
				}
	
				.favorites {
					color: #7b828a;
					font-size: 13px;
	
					image {
						width: 17px;
						height: 17px;
						margin-right: 8px;
					}
				}
	
				.info-title {
					font-size: 14px;
					color: #000;
	
					image {
						width: 17px;
						height: 17px;
						margin-right: 8px;
					}
				}
			}
		}
	
		.header {
			background: linear-gradient(to bottom, #4281f5, #f7f8fc);
			height: 125px;
			width: 100%;
			padding: 16px;
			box-sizing: border-box;
	
			.user {
				font-size: 14px;
				font-weight: 800;
	
				image {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-right: 8px;
				}
			}
		}
	}
	
}
</style>